<template>
  <div class="Faxian">
    <header>
      <span>发现</span>
    </header>
    <div class="top">
      <router-link :to="'/Zwxq/' + 0" style="color: white">
        <div class="top_lift">
          <span> ￥ </span>
        </div>
        <div class="top_right">
          <div class="top_right_top">{{ faxx_top.name }}</div>
          <div class="top_right_bottom">
            <span class="top_right_bottom_sc">{{ faxx_top.sc }}人已收藏</span>
            <span v-for="(value, key) in faxx_top.bq" :key="key">
              {{ value }}</span
            >
            <span class="top_right_bottom_dan">{{ faxx_top.price }}</span>
          </div>
        </div>
      </router-link>
    </div>
    <div class="jxtj">
      精选推荐 <span class="jxtj_bottom"></span>
      <span class="jxtj_right"> &gt;</span>
    </div>
    <div class="jxtj_lb">
      <ul>
        <li v-for="(vlaue, index) in fax_jxtj" :key="index">
          <router-link :to="'/Zwxq/' + index" style="color: #919191">
            <div class="jxtj_lb_box">
              <span class="jxtj_lb_li_name">{{ vlaue.name }}</span>
              <span class="jxtj_lb_li_author">{{ vlaue.author }}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="mrph">
      每日排行 <span class="mrph_bottom"></span>
      <span class="mrph_right"> &gt;</span>
    </div>
    <div class="mreph_box">
      <ul>
        <li v-for="(value, index) in fax_mrph" :key="index">
          <router-link :to="'/Zwxq/' + index">
            <div class="mreph_box_li_index">0{{ index / 1 + 1 }}</div>
            <div class="mreph_box_li_name">
              <p class="pp">{{ value.name }}</p>
              <div class="mreph_box_li_people">
                {{ value.people }}人已报名
                <span> {{ value.author }} </span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <Footer />
    <!-- <img src="../../assets/img/faxian1.png" alt="" /> -->
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue";
// import Heade from "../../components/Header.vue";
import axios from "axios";
export default {
  created() {
    axios({
      url: "http://localhost:3000/faxx_top",
      method: "get",
      params: {},
    }).then((res) => {
      this.faxx_top = res.data;
      res.data;
    });
    axios({
      url: "http://localhost:3000/fax_jxtj",
      method: "get",
      params: {},
    }).then((res) => {
      this.fax_jxtj = res.data;
      res.data;
    });
    axios({
      url: "http://localhost:3000/fax_mrph",
      method: "get",
      params: {},
    }).then((res) => {
      this.fax_mrph = res.data;
      res.data;
    });
  },
  name: "Faxian",
  props: {
    msg: String,
  },
  methods: {},
  components: {
    Footer,
    // Heade,
  },
  data() {
    return {
      faxx_top: [],
      fax_jxtj: [],
      fax_mrph: [],
      top_o: "手机赚钱的就来cfk嘎嘎嘎",
      top_s: "9人收藏",
      bookObjs: [
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "85元/单",
          img: "../",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "245元/天",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
        },
      ],
      mrph: [
        {
          name: "手机赚零花阿达阿斯顿阿斯顿123123213",
          author: "85元/单",
          people: "123",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "245元/天",
          people: "123",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
          people: "123",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
          people: "123",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
          people: "123",
        },
        {
          name: "手机赚零花阿达阿斯顿阿斯顿",
          author: "25元/单",
          people: "123",
        },
      ],
    };
  },
};
</script>

<style scoped>
.Faxian {
  padding-bottom: 1.5rem;
}
* {
  margin: 0;
  padding: 0;
}
.pp {
  color: #000;
}
header {
  margin-top: 0.1rem;
  margin: 0.24rem;
  font-size: 0.23rem;
  margin-bottom: 0.3rem;
}
.top {
  width: 3.47rem;
  height: 0.9rem;
  background: linear-gradient(to right, #21c2f0, #10dbd8);
  margin-left: 0.1rem;
  border-radius: 00.13rem;
  color: white;
}
.top_lift {
  float: left;

  line-height: 0.9rem;
  margin-left: 0.12rem;
}
.top_right_bottom_sc {
  font-size: 00.12rem;
}
.mreph_box_li_people {
  color: #919191;
}
.top_right {
  float: right;
}
.top_right_top {
  margin-top: 0.17rem;
  margin-right: 1.1rem;
}
.top_right_bottom {
  margin-top: 0.12rem;
}
.top_right_bottom span {
  margin-left: 00.12rem;
}
.top_right_bottom_dan {
  display: block;
  float: right;
  margin-right: 0.2rem;
}
.jxtj {
  margin-top: 00.34rem;
  font-size: 0.2rem;
  margin-left: 0.1rem;
  position: relative;
}
.jxtj_bottom {
  display: inline-block;
  width: 0.74rem;
  height: 0.14rem;
  background: linear-gradient(to right, #6aa9f6, #d48b9b);
  position: absolute;
  bottom: -0.02rem;
  left: 0rem;
  z-index: -1;
}
.jxtj_right {
  float: right;
  margin-right: 0.2rem;
  color: #919191;
}
.jxtj_lb {
  margin-top: 0.09rem;
  width: 3.7rem;
  height: 1.38rem;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
}
.jxtj_lb ul {
  width: 3.7rem;
  height: 1.38rem;
  white-space: nowrap;
  overflow-x: auto;
}
.jxtj_lb li {
  white-space: nowrap;
  width: 1.05rem;
  height: 1.28rem;
  background: #c8d8e2;
  display: inline-block;
  margin-left: 0.1rem;
  position: relative;
  list-style: none;
}
.jxtj_lb ul::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.jxtj_lb_box {
  width: 0.88rem;
  height: 0.5rem;
  position: absolute;
  bottom: 0.1rem;
  left: 0.1rem;
  font-size: 00.12rem;
  background: white;
  border-radius: 00.1rem;
  /* width:235px; */
}
.jxtj_lb_li_name {
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: nowrap; */
  display: block;
  margin-bottom: 0.02rem;
  margin-left: 0.08rem;
  margin-top: 00.09rem;
}
.jxtj_lb_li_author {
  display: block;
  color: #c8d8e2;
  margin-left: 0.08rem;
}
.mrph {
  margin-top: 0.29rem;
  font-size: 0.2rem;
  margin-left: 0.1rem;
  position: relative;
  margin-bottom: 0.21rem;
}
.mrph_bottom {
  display: inline-block;
  width: 0.74rem;
  height: 0.14rem;
  background: linear-gradient(to right, #6aa9f6, #d48b9b);
  position: absolute;
  bottom: -0.02rem;
  left: 0rem;
  z-index: -1;
}
.mrph_right {
  float: right;
  margin-right: 0.2rem;
  color: #919191;
}
.mreph_box {
  margin-left: 0.15rem;
}
.mreph_box li {
  width: 3.48rem;
  height: 0.82rem;
  border: #e0e2e1 0.01rem solid;
  border-radius: 0.2rem;
  list-style: none;
  position: relative;
  margin-bottom: 0.21rem;
  box-shadow: 0.02rem 0.02rem 0.02rem 0.02rem#e0e2e1;
}
.mreph_box_li_index {
  position: absolute;
  width: 0.44rem;
  height: 0.57rem;
  background: #01aefb;
  display: inline-block;
  line-height: 0.57rem;
  text-align: center;
  margin-left: 0.11rem;
}
.mreph_box_li_name {
  margin-left: 0.84rem;
  display: inline-block;
}
.mreph_box_li_name p {
  width: 2.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 0.16rem;
  margin-bottom: 0.12rem;
}
.mreph_box_li_people {
  font-size: 0.12rem;
}
.mreph_box_li_people span {
  float: right;
}
</style>
